<template>
  <div id="chart1" class="chart-area" />
</template>

<script>
import lodash from 'lodash'
import echarts from 'echarts'
import '@/util/echarts-theme-default'

export default {
  /* eslint-disable*/
  props: {
    chartData: Array
  },
  data() {
    return {
      chart: {
        target: null,
        data: [],
        option: {
          tooltip: {
            trigger: 'axis',
            formatter: '{a}<br />{b} : {c}'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 100
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [0, 0, 0, 0, 0, 0, 0]
            }
          ]
        }
      }
    }
  },
  watch: {
    chartData() {
      if (this.chartData.length) {
        return this.chart.data = this.chartData
      }
    },
    'chart.data'() {
      this.draw()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.chartsInit()
    })
  },
  methods: {
    // 初始化图表
    chartsInit() {
      // 创建图表对象
      if (!this.chart.target) {
        this.chart.target = echarts.init(document.getElementById('chart1'), 'westeros')
      }
      // 绘制默认图表
      this.chart.target.setOption(this.chart.option)
    },
    // 重绘
    draw() {
      // 配置项需要变更
      const option = {
        series: [
          {
            data: this.chart.data
          }
        ]
      }
      lodash.defaultsDeep(option, this.chart.option)
      this.chart.target.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-area{
    width: 100%;
    height: 400px;
}
</style>
